<template>
  <div class="discussion" :class="{ 'no-show': discussion.status }">
    <div class="one-discussion">
      <div class="head">
        <div class="d-head">
          <div class="title" @click="toDetail">
            <span>
              <span v-if="discussion.pid !== null">[P{{ discussion.pid }}]</span>{{ discussion.title }}</span>
            <n-tag style="margin-left: 10px" type="info" size="tiny" v-if="discussion.isTop">
              置顶
            </n-tag>
          </div>
          <div class="go-problem" v-if="discussion.pId !== null">
            <n-button type="success" @click="goProblem" size="small" round>
              去往原题
            </n-button>
          </div>
        </div>

        <div class="discusstion-tag">
          <el-tag v-for="tag in discussion.tags" :key="tag" class="mx-1" :class="{ 'no-show': discussion.status }"
            :disable-transitions="false">
            <span class="tag" :class="{ 'active-tag': isChoice(tag) }">{{
              tag.name
            }}</span>
          </el-tag>
        </div>
        <div class="content" @click="toDetail">
          <v-md-editor ref="markdown" :mode="'preview'" :height="'auto'" v-model="discussion.content"></v-md-editor>
        </div>
      </div>
      <div class="bottom">
        <div class="base-info">
          <div class="img">
            <n-avatar v-if="discussion.avatar === null || discussion.avatar === ''" round size="small" lazy>{{
              discussion.author }}</n-avatar>
            <n-avatar v-else round size="small" :src="$getAvatarUrl(discussion.avatar)" lazy></n-avatar>
            <span class="user-name">{{ discussion.author }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-pinglun"></i>
            <span class="icon-num">评论:</span>
            <span class="icon-num">{{ discussion.commentNum }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-dianzan"></i>
            <span class="icon-num">点赞:</span>
            <span class="icon-num">{{ discussion.likeNum }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-chakan"></i>
            <span class="icon-num">浏览:</span>
            <span class="icon-num">{{ discussion.viewNum }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-fenlei"></i>
            <a class="icon-num" @click="getCategoryDiscuss">{{
              discussion.categoryName
            }}</a>
          </div>
          <div class="icon">
            <i class="iconfont icon-shijian"></i>
            <span class="icon-num">发布时间:</span>
            <n-popover trigger="hover">
              <template #trigger>
                <span class="icon-num time">{{ postTime }}</span>
              </template>
              <span class="create-time">{{ discussion.createTime }}</span>
            </n-popover>
          </div>
          <div class="icon del" v-show="isMy || ($store.oj.userData.authLevel !== 0 && $store.oj.isLogin)
            " @click="delDiscuss">
            <i class="iconfont icon-shanchu"></i>
            <span class="icon-num">删除</span>
          </div>
          <div class="icon update" v-show="isMy" @click="updateDiscuss">
            <i class="iconfont icon-gengxin"></i>
            <span class="icon-num">更新</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { delDiscussAPI } from "@/api/ojAPI/ojAPI";
import { ElMessage } from "element-plus";
export default {
  emits: ["loading", "getDiscussAPI", "updateDisucss"],
  props: {
    isMy: {
      type: Boolean,
      default: false,
    },
    choiceTag: {
      type: Array,
      default: [],
    },
    discussion: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      categoryTimer: null,
      routerTime: null,
    };
  },
  computed: {
    postTime() {
      const nowTime = new Date();
      const discussTime = new Date(this.discussion.createTime);
      const differTime = new Date(nowTime.getTime() - discussTime.getTime());
      if (differTime.getFullYear() !== 1970) {
        if (parseInt(differTime.getFullYear()) - 1970 >= 100) {
          return (parseInt(differTime.getFullYear()) - 1970) / 100 + "世纪前";
        } else {
          return parseInt(differTime.getFullYear()) - 1970 + "年前";
        }
      } else if (nowTime.getMonth() !== discussTime.getMonth()) {
        return differTime.getMonth() + "月前";
      } else if (differTime.getDate() - 1 !== 0) {
        return differTime.getDate() - 1 + "天前";
      } else if (nowTime.getHours() - discussTime.getHours() !== 0) {
        return nowTime.getHours() - discussTime.getHours() + "小时前";
      } else if (differTime.getMinutes() !== 0) {
        return differTime.getMinutes() + "分钟前";
      } else if (differTime.getSeconds() !== 0) {
        return differTime.getSeconds() + "秒前";
      } else {
        return "刚刚发布";
      }
    },
  },
  methods: {
    isChoice(tag) {
      if (this.choiceTag.findIndex((item) => item === tag.name) !== -1) {
        return true;
      }
    },
    toDetail() {
      if (this.discussion.status) {
        ElMessage.warning("该讨论已被封禁，无法查看");
      } else {
        this.$router.push({
          path: `/home/discuss-detail/${this.discussion.id}`,
        });
      }
    },
    //去往原题
    goProblem() {
      this.$router.push({
        path: `/home/bank/${this.discussion.pId}`,
      });
    },
    //用于获取当前分类的讨论集合
    getCategoryDiscuss() {
      if (this.categoryTimer) {
        clearTimeout(this.categoryTimer);
      }
      this.categoryTimer = setTimeout(() => {
        console.log(this.discussion);
        this.$emit("getCategoryDiscuss", {
          id: this.discussion.categoryId,
          name: this.discussion.categoryName,
        });
      }, 300);
    },
    //用于更新讨论
    updateDiscuss() {
      console.log(this.discussion);
      this.$emit("updateDisucss", this.discussion);
    },
    //删除评论
    async delDiscuss() {
      let data = new FormData();
      data.append("id", this.discussion.id);
      this.$emit("loading");
      await delDiscussAPI(data).then((res) => {
        this.$emit("getDiscussAPI");
      });
    },
  },
  mounted() { },
};
</script>

<style lang="less" scoped>
.discussion {
  background: rgba(255, 255, 255, 1);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
  transition: box-shadow 0.3s ease-in-out 0s;
  margin-bottom: 10px;
  border-radius: 8px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;

  .one-discussion {
    width: 0px;
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  .head {
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;

    .d-head {
      display: flex;
      justify-content: space-between;
    }

    .title {
      span {
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      span:hover {
        color: #18a058;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      .n-tag {
        border-radius: 10px;
      }
    }

    .discusstion-tag {
      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;

        .tag {
          font-size: 12px;
          font-weight: 400;
          color: rgba(60, 60, 67, 0.6);
          height: 24px;
          border-radius: 12px;
          padding: 3px 8px;
          background-color: rgba(0, 10, 32, 0.05);
          cursor: default;
          margin: 2px 0px 2px 0px;
        }

        .active-tag {
          color: rgba(255, 255, 255, 1);
          background-color: rgba(0, 122, 255, 1);
          border-color: rgba(0, 122, 255, 1);
        }
      }

      .no-show {
        background-color: #f7ebee !important;
      }
    }

    .content {
      font-size: 14px;
      line-height: 24px;
      color: rgba(89, 89, 89, 1);
      cursor: pointer;

      ::v-deep(.github-markdown-body) {
        padding: 10px 5px 0px 5px;
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-break: break-word;
        align-self: stretch;
      }
    }
  }

  .bottom {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 12px;
    margin-left: -9px;

    .base-info {
      display: flex;
      align-items: center;

      i {
        font-size: 14px;
      }

      .img {
        display: flex;
        align-items: center;

        img {
          font-size: 12px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }

        .user-name {
          padding-left: 0.3rem !important;
          cursor: pointer;
          transition: color 0.2s ease;
          color: #999;
          font-size: 12px;
        }

        .user-name:hover {
          color: #18a058;
        }
      }

      .icon {
        display: flex;
        margin-left: 15px;

        .icon-num {
          color: rgba(60, 60, 67, 0.6);
          margin-left: 5px;
          font-size: 14px;
        }

        a {
          text-decoration: none;
          background-color: transparent;
          outline: 0;
          cursor: pointer;
          transition: color 0.2s ease;
        }

        a:hover {
          color: #18a058;
        }

        .time {
          cursor: default;
        }

        .time:hover {
          color: #18a058;
        }
      }

      .del {
        cursor: pointer;
      }

      .del:hover {
        color: #d03050;

        span {
          color: #d03050;
        }
      }

      .update {
        cursor: pointer;
      }

      .update:hover {
        color: #f0a020;

        span {
          color: #f0a020;
        }
      }
    }
  }
}

.no-show {
  background-color: #fee2e288 !important;

  ::v-deep(.github-markdown-body) {
    background-color: #fee2e288 !important;
  }
}
</style>
